<template>
	<view class="container">
		<up-popup :show="props.show" @close="close" mode="right" bgColor="#000000">
			<view class="popup-boxes">
				<view class="close" @click="close">
					<up-icon name="close-circle" color="#ffffff" size="22"></up-icon>
				</view>
				<view class="flex align-center mar-top-60">
					<image class="avatar" src="/static/image/robot.png" mode=""></image>
					<view class="flex flex-direction mar-left-25" style="line-height: 1.5;">
						<text class="color-fff font-32">{{ user.nickname }}</text>
						<!-- <text class="color-fff font-26">{{ user.tel }}</text> -->
						<text class="color-fff font-26">{{ user.id }}</text>
					</view>
				</view>

				<up-cell-group class="mar-top-60" :border="false">
					<up-cell @click="jumpModlue('card-list/card-list')" icon="/static/image/wallet.png"
						:title="$t('my.manage_wallet_addresses')"></up-cell>
					<up-cell @click="jumpModlue('set-nickname/set-nickname')" icon="/static/image/set_up.png"
						:title="$t('my.set_nickname')"></up-cell>
					<up-cell @click="jumpModlue('set-payment-password/set-payment-password')"
						icon="/static/image/payment.png" :title="$t('my.set_payment_password')"></up-cell>
					<up-cell @click="jumpModlue('change-login-password/change-login-password')"
						icon="/static/image/login.png" :title="$t('my.change_login_password')"></up-cell>
				</up-cell-group>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		user: {
			type: Object,
			default: () => {}
		}
	})

	const emit = defineEmits(['close'])

	const close = () => {
		emit('close', false)
	}

	const jumpModlue = (url) => {
		uni.navigateTo({
			url: `/pages/my_actions/${url}`
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.u-cell__body) {
		padding: 13px 0;
	}

	:deep(.u-cell__title-text) {
		margin-left: 15rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.popup-boxes {
		min-width: 480rpx;
		height: 100vh;
		padding: 25rpx;
		box-sizing: border-box;
		background: url('/static/image/login-bg.png') no-repeat;
		background-size: cover;

		.close {
			padding: 15rpx 10rpx 0 0;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}

		.avatar {
			width: 104rpx;
			height: 104rpx;
		}
	}
</style>